<template>
    <div>
      <h3>组件通讯ref</h3>
      <Child ref="child" />
      <button @click="handclick">获取子组件数据，或者调用子组件方法</button>
    </div>
  </template>

  <script setup>
  import { ref } from 'vue'
  defineOptions({
    name: 'ref'
  })

  import Child from './child.vue'

  const child = ref(null)

  const handclick = () => {
     // 获取子组件的数据
  console.log('获取子组件的数据name:', child.value.name)
  // 调用子组件的方法
  child.value.childFn('world')
  //获取子组件的数据msg
  console.log('获取子组件的数据msg:', child.value.msg)
  }

</script>